<!DOCTYPE html>
<html>
<head>
    <title>TV Bro: Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            color:#343a3c;
            background-color:#ffffff;
        }

        #suggestions {
            width:75%;
            margin: auto;
            table-layout:fixed;
            outline:none;
            position: relative;
        }

        td {
            overflow: hidden;
            white-space: nowrap;
            word-wrap: break-word;
            outline:none;
        }

        .sugg {
            padding: 17px 7px;
            white-space: nowrap;
            //background-image: linear-gradient(to bottom, #ffffff, #ffffff);
            //border-style: solid;
            //border-width: 1px;
            //border-color: #cccccc;
            word-wrap: break-word;
            font-size: 1.6em;
            transition:.5s;
        }
        .sugg:hover {
            transition:.5s;
            background-color: #eeeeee;
        }
        .sugg:hover > div:nth-child(2) {
            //color: #6666aa;
            //font-size: 1.8em;
         }
        .sugg > img {
            width: 32px;
            height: 32px;
        }
        .sugg-title {
            display: inline-block;
            max-width: 90%;
            margin-left: 5px;
        }
        .ellipsize, .sugg-title, .sugg-desk{
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .sugg-desk {
            color: #888;
            font-size: 0.8em!important;
        }
    </style>
</head>
<body>
<div style="height: 100%; width: 100%; position: fixed; left: 0; top: 0; overflow-x: hidden;">
    <table cellspacing="10" id="suggestions">

    </table>
</div>
<script>
function onSuggestionClicked(index) {
    TVBro.navigate(suggs[index].url);
}

var suggs = undefined;
function renderSuggestions() {
    if (suggs) return;
    var recommendations = [
        {"title": "YouTube", "url":"https://www.youtube.com"},
        {"title": "Facebook", "url":"https://www.facebook.com"},
        {"title": "Twitter", "url":"https://twitter.com"},
        {"title": "Wikipedia", "url":"https://www.wikipedia.org"},
        {"title": "Instagram", "url":"https://www.instagram.com"},
        {"title": "Twitch", "url":"https://www.twitch.tv"},
        {"title": "Amazon", "url":"https://www.amazon.com"},
        {"title": "BBC", "url":"https://www.bbc.com"}];
    var suggsStr = TVBro.suggestions();
    suggs = JSON.parse(suggsStr);
    //suggs = [{"title": "test", "url":"http://google.com"}, {"title": "test", "url":"http://googlewerqwerqwerwqerqwerdfasdfaserfwsderfwerqwerqwerwqdfasdfawsefWEFefWEFwaefAWSF.com"}, {"title": "test", "url":"http://google.com"}, {"title": "test", "url":"http://google.com"}, {"title": "test", "url":"http://google.com"}, {"title": "test", "url":"http://google.com"}, {"title": "test", "url":"http://google.com"}];
    var i = 0;
    while (suggs.length < 8) {
        suggs.push(recommendations[i++]);
    }
    suggs.map(function(c, i, arr){
        if (!c.favicon) {
            const url = new URL(c.url);
            c.favicon = url.origin + "/favicon.ico";
        }
        return c;
    })
    var container = document.getElementById('suggestions');
    var html = "";
    for (var i = 0; i < suggs.length; i++) {
        if (!(i % 2)) html += '<tr>';
        html += '<td onclick="onSuggestionClicked(' + i + ');"><div class="sugg" style="margin-left: 0;">'+
            '<img src="' + suggs[i].favicon + '" onerror="onfavloaderror(this);" /><div class="sugg-title">' +
            suggs[i].title + '</div><div class="sugg-desk">' + escapeHTML(suggs[i].url) + '</div></div></td>';
        if ((i % 2) || i == (suggs.length - 1)) html += '</tr>';
    }
    container.innerHTML = html;
    container.style.top = window.innerHeight / 2 - container.clientHeight / 2 + "px";
}

function onfavloaderror(source) {
    //source.src = 'ic_web.png';
    source.src = 'file:///android_asset/pages/ic_web.png';
    return true;
}

var escape = document.createElement('textarea');
function escapeHTML(html) {
    escape.textContent = html;
    return escape.innerHTML;
}

renderSuggestions();
</script>
</body>
</html>